


RuneScape Right Click Menu Formatting

by fennfics



Category: Runescape (Video Games)
Genre: Fanwork Research & Reference Guides, Not Fic, Other, Work Skin, workskin
Language: English
Status: In-Progress
Published: 2020-05-21
Updated: 2020-05-21
Packaged: 2021-03-03 00:14:36
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 996
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24165700
Author URL: https://archiveofourown.org/users/fennfics/pseuds/fennfics
Summary: An AO3 work skin that formats HTML tables to look like RuneScape right click menus. Originally developed for use in the RuneScape fanficSprited Away.Also comes with a guide on how to use it, for people who may not have used AO3 workskins (or HTML/CSS altogether, for that matter). Written to be understandable even by complete beginners -- if not, let me know!The first chapter is the work skin for RS3 styling. OSRS version coming soonish.(If you use it: credit is not necessary, but would be appreciated nonetheless!)
Kudos: 8





	RuneScape Right Click Menu Formatting

**Notes for the Chapter:**

> In lieu of a Sprited Away update today... here's this!

Step 1: Create a new work skin. You can navigate to the skins section of AO3 via the "Skins" link on the sidebar of your profile -- make sure you're on the section for Work Skins, not Site Skins -- but [here's a handy link](https://archiveofourown.org/skins/new?skin_type=WorkSkin) to get you directly to the work skin creation page. (Naturally, that link only works if you're logged in.)

Step 2: Copy and paste all the text between the lines into the new work skin. (Anything between /* and */ tags will get deleted by AO3, but it's here on my version for the purposes of explaining how everything works.)

* * *
    
    
    /* Menu formatting, based around an HTML table. Width and min-width properties are used to make sure the menu doesn't show up too wide or too small, depending on screen width -- it's a bit messy, but AO3 won't let you use screen width directly, so this is the best I could manage: */
    
    #workskin table {
      width: 50%;
      min-width: 200px;
      border: 1px solid white;
      background-color: rgb(10,29,38);
      font-family: monospace;
      font-weight: bold;
      color: rgb(198,184,149);
      text-shadow: 1px 1px black;
    }
    
    /* Automatically making a table heading into a "Choose Option" bar; delete these next two blocks if you don't want that: */
    
    #workskin th::before {
      content: "Choose Option";
    }
    
    #workskin th {
      text-align: left;
      background-color: rgb(17,18,13);
    }
    
    /* Removing AO3's automatic underline on fics, which is done in a weird way using borders rather than standard underline formatting: */
    
    #workskin table a,
    #workskin table a:link,
    #workskin table a:visited:hover {
      border: none;
    }
    
    /* For background colour change on option hover */
    
    #workskin td:hover {
      background-color: rgb(40,89,112);
    }
    
    /* To add thematic colours to different kinds of elements that could be interacted with: */
    
    #workskin .nonmemobj {
      color: rgb(184,209,209);
    }
    
    #workskin .memobj {
      color: rgb(248,213,107);
    }
    
    #workskin .scenery {
      color: rgb(0,255,255);
    }
    
    #workskin .npc {
      color: rgb(255,255,0);
    }
    
    /* And just to override AO3's site-wide formatting recolouring links within the menu, ensuring that it sticks to the right click menu style: */
    
    #workskin td a {
      color: rgb(198,184,149);
      text-shadow: 1px 1px black;
    }

* * *

Once that's all pasted in, save your new work skin with whatever title you want.

Step 3: Go to whatever work you want this on, whether that's a new work or an existing one. In the work settings, just under the drop-down list to choose which language your work is in, there'll be a dropdown labelled "Select Work Skin". Choose whatever you titled this one. Once that setting is saved, your work is all set up to use this work skin!

Step 4: Now, it's time to write up the HTML for the option selection menus. (You'll need to be on AO3's HTML text editor for this, not the rich text one.)

Let's say we want to make this:  
  
---  
Write Fic  
Cancel  
  
The code for this is:
    
    
    <table>
    <tbody>
    <tr><th></th></tr>
    <tr><td>Write <span class="scenery">Fic</span></td></tr>
    <tr><td>Cancel</td></tr>
    </tbody>
    </table>
    

To break that down:

  * The first and last two lines: <table> and <tbody> begin a table. </tbody> and </table> end it.
  * Line 3: <tr><th></th></tr> is an empty "header" row.  
<tr> and </tr> mark the beginning and the end of a row of the table (the "tr" stands for "table row").  
The <th> and </th> mark the beginning and the end of a heading ("th" standing for "table heading"), which should be left empty for the sake of this formatting.  
The way the skin is set up, this will be replaced with a header bar that says "Choose Option". If you don't want the "Choose Option", leave this line of code out.
  * Line 4: <tr><td>Write <span class="scenery">Fic</span></td></tr> \-- there's your first option.  
<td> and </td> mark the beginning and the end of a single "cell" of the table ("td" stands for "table data"). Put everything you want in that option row between the opening <td> and the closing </td>.  
The <span class="scenery">marks the beginning of cyan text formatting; the </span> ends that. Put anything that you specifically want coloured in cyan between those two.
  * Line 5: <tr><td>Cancel</td></tr> is an option line that just says "Cancel", no fancy formatting.



Here's a template for a table with two options. Replace all the spaces with whatever writing you want the options to display. If you want more than two options, just copy and paste in more of the rows with the spaces.
    
    
    <table>
    <tbody>
    <tr><th></th></tr>
    <tr><td>       </td></tr>
    <tr><td>       </td></tr>
    </tbody>
    </table>
    

There are currently four defined colours of text that you can apply to text within the menu (if I've missed any, let me know!)

For scenery (as demonstrated in the example): <span class="scenery">Room</span>  
For an NPC: <span class="npc">Name</span>  
For a members' object: <span class="memobj">Shiny Thing</span>  
For a free-to-play object: <span class="nonmemobj">Normal Thing</span>

These display like this:

Room  
---  
Name  
Shiny Thing  
Normal Thing  
  
Put those around any text that you'd like to have highlighted in those colours.

And finally: linking your options to different URLs! For this, you use the tag <a href="INSERT URL BEGINNING WITH https:// HERE"> where you want the link to begin, and </a> where you want the link to end.

Like this:
    
    
    <table>
    <tbody>
    <tr><td><span class="scenery"><a href="https://archiveofourown.org/">Archive of our Own</a></span></td></tr>
    </tbody>
    </table>

Which shows up as:

[Archive of our Own](https://archiveofourown.org/)  
---  
  
(And if you're completely unfamiliar with how HTML works, this works for adding links to anything, too! Just put your <a href="INSERT URL BEGINNING WITH https:// HERE"> and </a> around any ol' text in any ol' work, or just anything that uses HTML, and you're good!)

That should cover everything. If you need any help or want to make any suggestions, please leave a comment. There'll be a corresponding skin in the OSRS style as the next chapter!


End file.
